<template>
  <basic-dialog
    title="备注"
    :width="448"
    :loading="loading"
    :visible="visible"
    top="30vh"
    :append-to-body="true"
    @closed="handleClosed"
    @submit="handleSubmit"
  >
    <el-input
      v-model="remark"
      :maxlength="maxlength"
      show-word-limit
      placeholder="请输入备注"
    />
    <!--
    type="textarea"
      resize="none"
      :autosize="{ minRows: 1, maxRows: 3 }"
    -->
  </basic-dialog>
</template>

<script setup lang="ts">
interface IProps {
  loading?: boolean
  visible: boolean
  content: string
  maxlength?: number
}

interface IEmits {
  (event: 'submit', value: string): void
  (event: 'update:visible', value: boolean): void
}

const props = withDefaults(defineProps<IProps>(), {
  maxlength: 200,
  loading: false,
  content: ''
})

const emit = defineEmits<IEmits>()

const remark = ref('')

function handleClosed() {
  emit('update:visible', false)
}

function handleSubmit() {
  emit('submit', remark.value)
}

watchEffect(() => {
  remark.value = props.visible ? props.content : ''
})
</script>
